<template>
  <!-- content列表 -->
  <ul class="content">
    <li
      v-for="item in articleList"
      :key="item.id"
      class="cont"
      @click="goDetail(item.id)"
    >
      <!-- 用户头标签 -->
      <div class="user-info">
        <img :src="item.member_img" />
        <div class="info">
          <div class="user-name">{{ item.member_nickname }}</div>
          <div class="time">{{ getDifferenceTime(item.create_time) }}</div>
        </div>
      </div>
      <!-- 用户 文本标签 -->
      <div class="user-content">
        <!-- <div class="content-info-title">这里是标题</div> -->
        <div v-html="filterContent(item.content)"></div>
      </div>
      <!--用户图片 -->
      <ul class="image-box" v-if="item.img.length !== 0">
        <li
          v-for="(src, index) in item.img"
          :key="index"
          :class="item.img.length > 1 ? 'two' : 'one'"
        >
          <img :src="src" />
        </li>
        <!-- {{
              item.img
            }} -->
      </ul>
      <!-- 用户来源 -->
      <div class="user-device">
        <div>
          <img :src="item.log" />
          <p>{{ item.name }}</p>
        </div>
      </div>
      <!-- 文本点赞标签 -->
      <div class="content-info">
        <div>
          <img src="../assets/Thumbs.png" />
          <span>{{ item.like_num === 0 ? "首赞" : item.like_num }}</span>
        </div>
        <div>
          <img src="../assets/comments.png" />
          <span>{{ item.review_num === 0 ? "抢沙发" : item.review_num }}</span>
        </div>
      </div>
    </li>
  </ul>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      circle: [], //头部导航
      // top_article: [], //置顶文章
      // article_list: [], //所有文章列表
      // page: 1, //当前第几页
      // sort: 1, //当前所属类别
      // pagesize: 20,
    };
  },
  created() {
    //获取当前articleList信息
    this.getArticleList();
  },
  mounted() {},
  methods: {
    ...mapMutations("articles", [
      "changeTopArticle",
      "changeArticleList",
      "changeArticle_id",
    ]),
    filterContent(content) {
      return content.replace(/\n/g, "<br>");
    },
    async getArticleList() {
      const res = await this.$axios.get(
        `https://api.vgn.cn/apiv2/group/article/index?page=${String(
          this.page
        )}&sort=${String(this.sort)}&page_size=${String(this.pagesize)}`
      );
      this.changeTopArticle(res.data.top_article);
      this.changeArticleList(res.data.article_list);
    },
    change(sort) {
      this.sort = sort;
      this.getArticleList(this.page, this.sort, this.pagesize);
    },
    goDetail(id) {
      this.changeArticle_id(id);
      this.$router.push({ path: `/detail/${String(id)}`, params: { id: id } });
    },
    timestampToTime(timestamp) {
      timestamp = timestamp ? timestamp : null;
      let date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      let h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    getDifferenceTime(createTime) {
      createTime = createTime ? createTime : null;
      const nowData = new Date().getTime();
      let date = nowData - new Date(createTime * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let m = Math.floor(date / 1000 / 60) % 60;
      let h = Math.floor(date / 1000 / 60 / 60);
      if (h === 0 && m <= 2) {
        return "刚刚";
      } else if (h === 0 && m > 2) {
        return `${m}分钟前`;
      } else if (h !== 0 && h <= 12) {
        return `${h}小时前`;
      } else {
        return this.timestampToTime(createTime);
      }
    },
  },
  computed: {
    ...mapGetters("articles", [
      "sort",
      "articleList",
      "top_article",
      "pagesize",
      "page",
    ]),
  },
};
</script>
<style lang="less" scoped>
@import "@/style/index.less";
// 用户 文本框标签
.content {
  .margin(10,0,0,0);
  background: rgba(245, 246, 248);
  .cont {
    .margin(10,0,10,0);
    background: white;
    // 用户头标签
    .user-info {
      .padding(0,0,0,20);
      .height(60);
      display: flex;
      align-items: center;
      img {
        .width(40);
        .height(40);
        .border-radius(20,20,20,20);
      }
      .info {
        .height(60);
        .margin(0,0,0,10);
        display: inline-block;
        display: flex;
        justify-content: center;
        flex-direction: column;
      }
    }
    // 用户文本标签
    .user-content {
      .padding(0,20,0,20);
    }
    .image-box {
      display: flex;
      flex-wrap: wrap;
      .padding(0,0,0,20);
      .one {
        .margin(4,0,0,4);
        img {
          .width(250);
          .height(120);
        }
      }
      .two {
        .margin(4,0,0,4);
        img {
          .width(105);
          .height(105);
        }
      }
    }
    // 用户来源
    .user-device {
      background: #ccc;
      div {
        background: white;
        display: flex;
        align-items: center;
        .padding(0,0,0,20);
        .height(50);
        img {
          z-index: 1;
          .border-radius(20,20,20,20);
          .width(30);
          .height(30);
        }
        p {
          .line-height(20);
          .padding(5,20,5,30);
          .border-radius(10,10,10,10);
          .margin(0,0,0,-20);
          background: #ccc;
        }
      }
    }
    // 文本信息
    .content-info {
      .width(375);
      display: flex;
      background: rgba(245, 246, 248);
      div {
        .margin(3,0,0,0);
        .width(187.5);
        .height(60);
        text-align: center;
        .line-height(60);
        background: white;
        img {
          .margin(0,5,0,0);
        }
      }
    }
  }
}
</style>
